<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
	    <!-- Loading Bootstrap -->
	    <link href="./Public/Admin/Flat/dist/css/vendor/bootstrap.min.css" rel="stylesheet">
	    <!-- Loading Flat UI -->
	    <link href="./Public/Admin/Flat/dist/css/flat-ui.css" rel="stylesheet">
	    <!--<link href="./Public/Admin/Flat/docs/assets/css/demo.css" rel="stylesheet">-->
	    <link rel="shortcut icon" href="./Public/Admin/Flat/img/favicon.ico">
	    <!--载入上传类样式-->
	    <link rel="stylesheet" type="text/css" href="Public/uploadify/uploadify.css">
	    <!--载入上传类-->
	    <script type="text/javascript" src="Public/uploadify/jquery-1.8.2.min.js"></script>
    	<script type="text/javascript" src="Public/uploadify/jquery.uploadify.min.js"></script>
	    <!--载入百度编辑器-->
	    <script type="text/javascript" charset="utf-8" src="Public/ueditor1_4_3/ueditor.config.js"></script>
    	<script type="text/javascript" charset="utf-8" src="Public/ueditor1_4_3/ueditor.all.min.js"> </script>
    	<script type="text/javascript" charset="utf-8" src="Public/ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>
    	<script type="text/javascript">
    		$(function(){
				$('[name=cate_cid]').change(function(){
					//通过选择分类获得tid,然后发异步到数据，查询tid所对应的类型属性，js组合字符串，插入到页面
					var tid = $('option:selected').attr('tid');
					$('input[name=type_tid]').val(tid);
//					//因为顶级分类没有类型，不需要发异步
//					if(tid==0) return;
					//通过异步发送tid，获得类型属性，然后组合字符串插入到页面
					$.ajax({
						//请求地址
						url:"{{U('ajaxGetAttr')}}",
						//发送的数据
						data:{id:tid},
						//请求类型
						type:"post",
						//返回数据类型
						dataType:'json',
						//成功返回给php
						success:function(phpData){
							//属性
							var attr='';
							//规格
							var spec='';
							$.each(phpData, function(k,v) {
							//规格
							if(v.class == 1){
								spec += '<tr class="info">' +
								'<td>'+v.taname+'</td>' +
								'<td>' +
									'<select name="spec['+v.taid+'][value][]" id=""><option value="">请选择</option>';
										$.each(v.tavalue, function(kk,vv) {    
											 spec += '<option value="'+vv+'">'+vv+'</option>';                                                      
										});
									spec += '</select></td><td>附加价格：<input type="text" name="spec['+v.taid+'][price][]" id="" /></td>' +
										'<td><span class="btn btn-success add-spec">增加规格</span></td></tr>';
							
							}else{//属性
								attr += '<tr class="info">' + 
											'<td>'+v.taname+'</td>' + 
											'<td>' + 
											'<select name="attr['+v.taid+']" id=""><option value="">请选择</option>';
												
												$.each(v.tavalue, function(kk,vv) {    
													 attr += '<option value="'+vv+'">'+vv+'</option>';                                                      
												});
												
								attr += '</select></td></tr>';
							}                                                          
						});
							$('#attr').html(attr);
							$('#spec').html(spec);
						}
					});
				});
				//点击添加规格
			$('.add-spec').live('click',function(){
				//找到父级的tr
				var parentsTr = $(this).parents('tr');
				//把父级的tr克隆复制
				var cloneTr = parentsTr.clone();
				cloneTr.find('.add-spec').removeClass('add-spec btn-success').addClass('remove-spec btn-danger').html('删除规格');
				//插入下一行
				parentsTr.after(cloneTr);
			})
			//删除规格
			$('.remove-spec').live('click',function(){
				$(this).parents('tr').remove();
			})
			});
    	</script>
	</head>
	<body>
		<form action="" method="post">
			<div class="alert alert-success">添加商品</div>
			<table class="table table-bordered table-hover" style="border: 0px;">
				<thead>
					<tr>
						<th colspan="2" class="btn btn-primary">基本信息</th>
					</tr>
				</thead>
				<tbody>
					<tr class="info">
						<td>所属分类</td>
						<td>
							<select name="cate_cid" id="ajx">
								<option value="">-请选择-</option>
								{{foreach from="$cateData" value="$v"}}
									<option value="{{$v['cid']}}" tid="{{$v['type_tid']}}">{{$v['_name']}}</option>
								{{endforeach}}
								<input type="hidden" name="type_tid" value=""/>
							</select>
						</td>
					</tr>
					<tr class="info">
						<td>所属品牌</td>
						<td>
							<select name="band_baid">
								<option value="">-请选择-</option>
								{{foreach from="$bandData" value="$v"}}
									<option value="{{$v['baid']}}">{{$v['bname']}}</option>
								{{endforeach}}
							</select>
						</td>
					</tr>
					<tr class="info">
						<td>商品名称</td>
						<td>
							<input name="gname" type="text">
						</td>
					</tr>
					<tr class="info">
						<td>单位</td>
						<td>
							<input name="unit" value="件" type="text">
						</td>
					</tr>
					<tr class="info">
						<td>市价场</td>
						<td>
							<input name="marketprice" type="text">
						</td>
					</tr>
					<tr class="info">
						<td>商城价</td>
						<td>
							<input name="shopprice" type="text">
						</td>
					</tr>
					<tr class="info">
						<td>商品货号</td>
						<td>
							<input name="gnumber" type="text">
						</td>
					</tr>
					<tr class="info">
						<td>总库存</td>
						<td>
							<input name="stock" type="text">
						</td>
					</tr>
					<tr class="info">
						<td>点击次数</td>
						<td>
							<input name="click" type="text">
						</td>
					</tr>
				</tbody>
			</table>
			<p class="btn btn-primary">商品属性</p>
			<table class="table table-bordered table-hover" id="attr" style="border: 0px;">

			</table>
			<p class="btn btn-primary">商品规格</p>
			<table class="table table-bordered table-hover" id="spec" style="border: 0px;">

			</table>
			<table class="table table-bordered" style="border: 0px;">
				<tbody>
					<tr>
						<th colspan="3" class="btn btn-primary">列表图</th>
					</tr>
					<tr class="info">
						<td>上传图片</td>
						<td>
							<!--logo-start-->
					<!-- html页面 -->
						<div lab="uploadFile">
						    <input id="file" type="file" multiple="true">
						    <span>类型: *.jpg,*.png 大小: 2000KB 数量: 1</span>
						    <script type="text/javascript">
						        $(function() {
						            $('#file').uploadify({
						                'formData'     : {//POST数据
						                    '<?php echo session_name();?>' : '<?php echo session_id();?>',
						                },
						                'fileTypeDesc' : '上传文件',//上传描述
						                'fileTypeExts' : '*.jpg;*.png',
						                'swf'      : '{{__PUBLIC__}}/uploadify/uploadify.swf',
						                'uploader' : '{{U('upload')}}',
						                'buttonText':'选择文件',
						                'fileSizeLimit' : '2000KB',
						                'uploadLimit' : 1,//上传文件数
						                'width':65,
						                'height':25,
						                'successTimeout':10,//等待服务器响应时间
						                'removeTimeout' : 0.2,//成功显示时间
						                'onUploadSuccess' : function(file, data, response) {
											//转为json
						                    data=$.parseJSON(data);
						                    //获得图片地址
						                    var imageUrl = data.url;
						                    var li="<li style='display:inline-block;padding-left:10px' path='"+data.path+"' url='"+data.url+"'><img style='width:80px;height:80px;' src='"+imageUrl+"'/><input type='hidden' name='pic' value='"+data.path+"'/></li>";
						                    $("#uploadList ul").prepend(li);
						                }
						            });
						        });
						    </script>
						    <div id="uploadList">
						        <ul>
						
						        </ul>
						    </div>
						</div>
							<!--logo/-->
						</td>
					</tr>
				</tbody>
			</table>

			<table class="table table-bordered" style="border: 0px;">
				<tbody>
					<tr>
						<th colspan="3" class="btn btn-primary">商品图册</th>
					</tr>
					<tr class="info">
						<td>上传图片</td>
						<td>
							<div lab="uploadFile">
						    <input id="f" type="file" multiple="true">
						    <span>类型: *.jpg,*.png 大小: 2000KB 数量: 10</span>
						    <script type="text/javascript">
						        $(function() {
						            $('#f').uploadify({
						                'formData'     : {//POST数据
						                    '<?php echo session_name();?>' : '<?php echo session_id();?>',
						                },
						                'fileTypeDesc' : '上传文件',//上传描述
						                'fileTypeExts' : '*.jpg;*.png',
						                'swf'      : '{{__PUBLIC__}}/uploadify/uploadify.swf',
						                'uploader' : '{{U('upload')}}',
						                'buttonText':'选择文件',
						                'fileSizeLimit' : '2000KB',
						                'uploadLimit' : 10,//上传文件数
						                'width':65,
						                'height':25,
						                'successTimeout':10,//等待服务器响应时间
						                'removeTimeout' : 0.2,//成功显示时间
						                'onUploadSuccess' : function(file, data, response) {
						                    //转为json
						                    data=$.parseJSON(data);
						                    //获得图片地址
						                    var imageUrl = data.url;
						                    var li="<li style='display:inline-block;padding-left:10px'><img style='width:80px;height:80px' src='"+imageUrl+"'/><input type='hidden' name='dpic[]' value='"+data.path+"'/></li>";
						                    $("#uploadList2 ul").prepend(li);
						                }
						            });
						        });
						    </script>
						    <div id="uploadList2">
						        <ul>
						
						        </ul>
						    </div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>

			<table class="table" style="border: 0px;">
				<tbody>
				<script type="text/javascript">
					$(function(){
						$('#goodsbox').click(function(){
							if($('#box').css('display')=='none'){
								$('#box').show();
							}else{
								$('#box').hide();
							}
						});
					});
				</script>
				<tr id="goodsbox" >
					<th class="btn btn-primary">商品详细</th>
				</tr>
				<tr id="box" style="display: none;">
					<td>
						<!--调用百度编辑器-->
						<script id="editor" type="text/plain" style="width:100%;height: 300px;" name="intro"></script>
						<script>
							var ue=UE.getEditor('editor');
						</script>
					</td>
				</tr>
				<tbody>
			</table>

			<table class="table" style="border: 0px;">
				<script type="text/javascript">
					$(function(){
						$("#serviceBox").click(function(){
							if($("#smallBox").css("display")=='none'){
								$("#smallBox").show();
							}else{
								$("#smallBox").hide();
							}
						});
					});
				</script>
				<tbody>
					<tr id="serviceBox">
						<th class="btn btn-primary">售后服务</th>
					</tr>
					<tr id="smallBox" style="display: none;">
						<td>
							<!--调用百度编辑器-->
							<script id="editor_service" type="text/plain" style="width:100%;height: 300px;" name="service"></script>
							<script>
								var ue=UE.getEditor('editor_service');
							</script>
						</td>
					</tr>
					
				</tbody>
			</table>
			<button class="btn btn-primary btn-block" type="submit">添加商品 </button>
		</form>
	</body>
</html>


	
